<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Backgroup Content</title>
		<style type="text/css">
			.tipmsg{font-weight:bold; font-size: 14px;}
			.select-outer { display:inline-block; *display:inline; zoom:1; border:1px solid #ccc; }
			.select-inner { display:inline-block; *display:inline; zoom:1; height:20px; overflow:hidden; position:relative; }
			.select-h { border:1px solid #ccc; height:22px; font-size:14px; font-weight:bold; position:relative; zoom:1; margin:-1px;}
			.select-wh200 { padding-top:2px;padding-bottom:2px;}
			.select-wh200 .select-inner { width:130px; }
			.select-wh200 select { width:132px; }
		</style>
	</head>
	<body>
		<div>
			<table width="100%" height="100px" border="0" cellpadding="0" cellspacing="0">
	          	<tr>
	          		<td width="50%" align="right" class="tipmsg">系统当前皮肤：</td>
					<td width="50%" align="left">
						<div class="select-outer select-wh200">
							<div class="select-inner">
							    <select id="skinName" onchange="changeSkin(this.value, 7);" class="select-h">
							    	<option value="default" style="color:black">默认</option>
									<option value="blue" style="color:#0081cc">蓝色</option>
								  	<option value="gradient" style="color:#a6ba3b">渐变</option>
								  	<option value="green" style="color:green">绿色</option>
								  	<option value="pink" style="color:pink">粉色</option>
								  	<option value="purple" style="color:purple">紫红</option>
								</select>
							</div>
						</div>
					</td>
				</tr>
          	</table>
		</div>
		<div><img src="resources/welcome.jpg" height="460px"></div>
	</body>
	<script type="text/javascript">
		Ext.onReady(function() {
			getCurrentSkinName();
		})
		
		function getCurrentSkinName(){
			var currentSkinName = getCookie("nowskin");
			if(currentSkinName==null){
				currentSkinName = "default";
			}
			document.getElementById("skinName").value = currentSkinName;
			changeColor(currentSkinName);
		}
	
		function changeSkin(skinName, days){
			__CHANGE_SKIN__(skinName, days);
			changeColor(skinName);
			reverseChangeSkin(skinName);
		}
		
		function changeColor(skinName){
			if(skinName=="default"){
				document.getElementById("skinName").style.color = "black";
			}else if(skinName=="blue"){
				document.getElementById("skinName").style.color = "#0081cc";
			}else if(skinName=="gradient"){
				document.getElementById("skinName").style.color = "#a6ba3b";
			}else if(skinName=="green"){
				document.getElementById("skinName").style.color = "green";
			}else if(skinName=="pink"){
				document.getElementById("skinName").style.color = "pink";
			}else if(skinName=="purple"){
				document.getElementById("skinName").style.color = "purple";
			}
		}
	</script>
</html>
